.slider {
    overflow: hidden;
    width: 100%;
    height: 400px;
    position: relative;
  }
  
  .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }
  
  .slide.active {
    opacity: 1;
  }
  
  .slider .slide:first-child {
    opacity: 1;
  }
  
  .slider .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .slider .slide.active {
    animation: slide 5s linear infinite;
  }
  
  @keyframes slide {
    0% {
      opacity: 1;
    }
    33% {
      opacity: 0;
    }
    66% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }